import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

// Element Plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

// 样式
import 'normalize.css'
import './styles/index.scss'

// SVG图标
import 'virtual:svg-icons-register'

// 进度条
import 'nprogress/nprogress.css'

// 权限指令
import { setupPermissionDirective } from './directives/permission'

// 工具函数
import { setupGlobalProperties } from './utils/global'

const app = createApp(App)

// 配置Pinia
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

// 注册Element Plus图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

// 配置Element Plus中文
import zhCn from 'element-plus/es/locale/lang/zh-cn'
app.use(ElementPlus, {
  locale: zhCn,
  size: 'default',
})

// 安装插件
app.use(pinia)
app.use(router)

// 设置权限指令
setupPermissionDirective(app)

// 设置全局属性
setupGlobalProperties(app)

// 移除加载动画
const removeLoading = () => {
  const loading = document.getElementById('loading')
  if (loading) {
    loading.remove()
  }
}

// 等待路由准备完成
router.isReady().then(() => {
  app.mount('#app')
  removeLoading()
})

// 开发环境配置
if (import.meta.env.DEV) {
  // 开发工具
  app.config.performance = true
  
  // 全局错误处理
  app.config.errorHandler = (err, vm, info) => {
    console.error('全局错误捕获:', err, vm, info)
  }
  
  // 警告处理
  app.config.warnHandler = (msg, vm, trace) => {
    console.warn('全局警告:', msg, vm, trace)
  }
}

// 生产环境配置
if (import.meta.env.PROD) {
  // 禁用开发者工具
  app.config.devtools = false
  
  // 简化错误处理
  app.config.errorHandler = (err) => {
    console.error('应用错误:', err)
  }
}

export default app
